<!--
 * @Description:
 * @Author: dh
 * @Date: 2021-08-19 17:18:39
 * @LastEditors: dh
 * @LastEditTime: 2022-04-12 16:07:54
-->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>二栏布局--float + margin</title>
	</head>
	<style>
		* {
			margin: 0;
		}

		.main {
			min-width: 1020px;
		}

		.side {
			float: left;
		}

		.content {
			margin-left: 200px;
			background-color: tan;
		}
	</style>

	<body>
		<div class="main">
			<div class="side">侧边栏-float</div>
			<div class="content">
				内容-margin-left Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam optio sed dolorem hic odio laboriosam iusto architecto
				asperiores aperiam! Quas saepe possimus sunt blanditiis, quam ratione pariatur quisquam beatae architecto asperiores aperiam! Quas saepe
				possimus sunt blanditiis, quam ratione pariatur quisquam beatae architecto asperiores aperiam! Quas saepe possimus sunt blanditiis, quam
				ratione pariatur quisquam beatae architecto asperiores aperiam! Quas saepe possimus sunt blanditiis, quam ratione pariatur quisquam beatae
				architecto asperiores aperiam! Quas saepe possimus sunt blanditiis, quam ratione pariatur quisquam beatae architecto asperiores aperiam! Quas
				saepe possimus sunt blanditiis, quam ratione pariatur quisquam beatae libero?
			</div>
		</div>
	</body>
</html>
